<script>
import draggable from "vuedraggable";
import Baseoption from "../components/base.vue";
export default {
  components: {
    draggable,
    Baseoption,
  },
  props: ["node"],
  data() {
    return {};
  },

  mounted() {},
  render(h) {
    return (
      <div class="options">
        <Baseoption node={this.node}></Baseoption>
        <el-divider direction="horizontal" content-position="center">
          选项
        </el-divider>
        <el-button
          type="text"
          icon="el-icon-plus"
          size="mini"
          nativeOnClick={(e) => {
            this.node.options.push({
              label: "选项",
              value: this.node.options.length + 1,
            });
          }}
        >
          新增选项
        </el-button>
        <el-button
          type="text"
          icon="el-icon-plus"
          size="mini"
          nativeOnClick={(e) => {
            let t = 1;
            this.node.options.map((a, b) => {
              if (a.type) {
                t = 0;
              }
            });
            if (t) {
              this.$set(this.node, "other", null);
              this.node.options.push({
                label: "其他",
                value: this.node.options.length + 1,
                type: "other",
              });
            }
          }}
        >
          新增其他
        </el-button>
        <draggable
          class="draggable-option"
          handle=".el-input-group__prepend"
          ghostClass="ghost"
          onEnd={(e) => {
            if (this.node.options.length) {
              this.node.options.map((i, j) => {
                i.value = j + 1;
              });
            }
          }}
          list={this.node.options}
          animation="200"
        >
          {this.node.options.map((i) => {
            return (
              <el-input
                class="option"
                value={i.label}
                placeholder="请输入"
                size="mini"
                onInput={(e) => {
                  i.label = e;
                }}
              >
                <i slot="prepend" class="el-icon-s-operation"></i>
                <i
                  slot="append"
                  onClick={(e) => {
                    if (this.node.options.length == 1) {
                      this.$message.warning("至少得有一个选项");
                      return;
                    }
                    this.node.answer.indexOf(i.value) != -1
                      ? this.node.answer.splice(
                          this.node.answer.indexOf(i.value),
                          1
                        )
                      : null;
                    this.node.options.splice(i.value - 1, 1);
                    this.node.options.map((a, b) => {
                      a.value = b + 1;
                    });
                  }}
                  class="el-icon-circle-close"
                ></i>
              </el-input>
            );
          })}
        </draggable>
      </div>
    );
  },
};
</script>

<style scoped>
.option {
  margin: 5px 0;
}

.options >>> .el-input-group__append {
  background: none;
  border: none;
  font-size: 18px;
  color: #f56c6c;
  cursor: pointer;
}

.options >>> .el-input-group__prepend {
  cursor: move;
}

.ghost {
  border: 1px dashed #409eff;
}
</style>